/* 顶部区域：不要固定高度、不要 overflow:hidden */
.hero { position: relative; }

/* 图片在文档流里，宽度 100%，高度按比例自增 => 不会被裁切 */
.hero-img { width: 100%; display: block; }

/* 悬浮导航：绝对定位在图片上方 */
.header {
  position: absolute; left: 0; right: 0; top: 0; z-index: 10;
}
.header-inner {
  height: 88rpx; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 34rpx; font-weight: 600; text-shadow: 0 2rpx 6rpx rgba(0,0,0,.25);
}
.header-shadow {
  position: absolute; left: 0; right: 0; top: 0; height: 160rpx;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0));
  z-index: -1;
}
.title {
  font-size: 34rpx;
  color: #333;
  font-weight: 600;
}



/* 渐变长方形：宽度左右留白，固定高度，圆角+阴影 */
.hero-glass{
  position: absolute;
  left: 0rpx;
  right: 0rpx;
  bottom: 230rpx;                 /* 让它压住白色面板一点点，可按视觉调 -16~-48rpx */
  height: 520rpx;                 /* 你 Figma 是 433px，这里先给约 320rpx，按视觉调 */
  border-radius: 24rpx;
  box-sizing: border-box;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.80) 10%,
    #fff 3%,
    #fff 87%
  );
  box-shadow: 0 8rpx 24rpx rgba(26,39,68,0.08);
  pointer-events: none;           /* 避免遮挡下面卡片的点击 */
}

/* 内容面板 */
.panel {
  margin-top: -400rpx;      
  background: #fff;
  border-radius: 28rpx 28rpx 0 0;
  padding: 24rpx;
}

/* 2×2 网格 */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32rpx;              /* Figma gap = 16px → 32rpx */
}

/* 卡片（完全按 Figma 转成 rpx） */
.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;    /* Figma 是 flex-end，但视觉 UI 卡片内容一般靠左放 */
  padding: 28rpx 32rpx;       /* Figma 14px 16px → 28rpx 32rpx */
  gap: 32rpx;                 /* Figma gap 16px → 32rpx */
  
  width: 335rpx;              /* Figma width 167.5px → 335rpx */
  height: 308rpx;             /* Figma height 153.99px → 308rpx */

  background: #F1F7FF;
  border-radius: 24rpx;       /* Figma 12px → 24rpx */

  box-shadow: 0 8rpx 24rpx rgba(26, 39, 68, 0.08);

  position: relative;
  box-sizing: border-box;
}

/* 文字 */
.tit {
  font-size: 32rpx;
  font-weight: 700;
}

.sub {
  font-size: 26rpx;
  color: #6b7280;
  width: 80%;
}

/* 卡片右下角图标 */
.icon {
  position: absolute;
  right: 22rpx;
  bottom: 22rpx;
  width: 120rpx;
  height: 120rpx;
}

.safe {
  height: env(safe-area-inset-bottom);
}

